<template>
  <div class="component">

  <div class="big-left" >
    <div class="big-left-bottom">
      <div style="font-size: 19px;margin-top: 30px;margin-left: 20px">常见品牌</div>
      <div style="margin-top: 15px;margin-left: 20px">
        <el-checkbox-group style="display: inline-block" size="large">
          <el-checkbox-button  @click="selectBrandAll"     label="" >
            全部
          </el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group style="display: inline-block"   v-model="checkbox" size="large">
          <el-checkbox-button  @change="selectBrandByIds"   style="margin-right: 10px;margin-top: 5px"   v-for="item in brands" :key="item.id" :label="item.id">
            {{item.name}}
          </el-checkbox-button>
        </el-checkbox-group>

      </div>
    </div>
    <div class="big-left-top">
        <div class="slider-demo-block" style="padding-top: 40px;padding-left: 20px">
          <span class="demonstration">日租价格</span>
          <div style="display: inline-block;width: 280px;margin-left: 20px" >
          <el-slider v-model="value1"  size="small" :step="10" :max="1000" @change="changePrice" />
          </div>
        </div>
      <div class="slider-demo-block" style="padding-top: 60px;padding-left: 20px">
        <span class="demonstration">年份</span>
        <div style="display: inline-block;width: 280px;margin-left: 50px" >
          <el-slider v-model="value2"  size="small" :step="1" :min="1900" :max="2100"  @change="changeYear"  />
        </div>
      </div>
    </div>

  </div>
  <div class="big-box" @scroll="onScroll">
    <div class="small-box" v-for="item in items" :key="item.id" >
      <div class="small-box-left">
        <el-image
            style="width: 220px; height: 150px"
            :src="baseUrl+item.headImg"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
        />
      </div>
      <div class="small-box-center">
          <div style="height: 25px;font-weight: bold;font-size: 20px">{{item.heading}}</div>
          <div style="height: 15px;color: darkgrey;font-size: 14px;margin-top: 4px">{{item.subtitle}}</div>
      </div>
      <div class="small-box-right">
          <span>
            <span style="color: red;font-size: 18px;font-weight: bold">{{item.price}}元</span> / 日
          </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button style="width: 100px" @click="toDetail(item.id)" type="danger">预订</el-button>
      </div>

    </div>
  </div>
  </div>
</template>
<script setup>

import {onMounted, ref} from "vue";
import axios  from "@/axios.js"
import {router} from "@/router/index.js";

const baseUrl = '../../public/img/'

onMounted(()=>{
  selectGoodsByStatus([])
  selectBrands()
})


const value1 = ref('')
const value2 = ref('')
const items = ref([])

const brands = ref([])

const checkbox = ref([])

const toDetail = (id)=>{
  router.push(`/carDetail/${id}`)
}
const selectBrands = ()=>{
    axios.get("/brand/home/selectBrands").then(res=>{
        brands.value = res.data
    })
}

const selectBrandAll = ()=>{
    checkbox.value = []
    selectBrandByIds()
}
const selectBrandByIds = ()=>{
    selectGoodsByStatus(checkbox.value)
}

const selectGoodsByStatus = (data)=>{
  axios.post(`/goods/home/selectGoodsByStatus?year=${value2.value}&price=${value1.value}`,data).then(res=>{
      items.value = res.data
  })
}

const changePrice = (val)=>{
    selectGoodsByStatus(checkbox.value)
}

const changeYear = (val)=>{
    selectGoodsByStatus(checkbox.value)
}

const onScroll = ()=>{

}

</script>

<style scoped>

.component{
  width: 1480px;
  height: 661px;
  background-color: #F9F9F9;
}

.big-box {
  width: 800px;
  height: 630px; /*设置大盒子的高度*/
  overflow-y: auto; /*设置大盒子的垂直滚动条*/
  border: 1px solid #ccc; /*设置大盒子的边框样式*/
  background-color: #ffffff;
  float: left;
  margin-top: 10px;
}

.small-box {
  height: 150px; /*设置小盒子的高度*/
  line-height: 150px; /*设置小盒子的行高，使内容垂直居中*/
  background-color: #ffffff; /*设置小盒子的背景色*/
  margin-bottom: 10px; /*设置小盒子之间的下边距*/
  text-align: center; /*设置小盒子内容水平居中*/
  border-bottom: 1px solid #cccccc;
}

.small-box-left{
  float: left;
  width: 220px; height: 150px
}

.small-box-center{
  float: left;
  width: 250px;
  height: 150px;
  line-height: 120px;
}
.small-box-right{
  height: 150px;
  width: 300px;
  float: left;
}

.big-left{
  width: 550px;
  height: 630px;
  float: left;
}


.big-left-top{
  margin-top: 10px;
  margin-left: 120px;
  width: 400px;
  height: 250px;
  background-color: #ffffff;

}
.big-left-bottom{
  margin-left: 120px;
  border-top: 1px solid #cccccc;
  width: 400px;
  height: 370px;
  background-color: #ffffff;
}

.el-check-tag {
  background-color: white;
  color: black;
  font-weight: normal;
}


</style>